@import "../base/Base";

#theme-header {
  @include set-flex($diraxis: space-between);
  @include set-box(($match-root, $theme-header-height), $paddings: (0.5rem, 2rem));
  @include set-pose(fixed, $z: 1);
  @include set-text();
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease-in-out;
  #title {
    @include set-flex($auaxis: center);
    .text {
      @include set-text(1.11rem, 700, $line-height: 1.11rem, $color: #3b3a3a);
      text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
    }
  }
  #search {
    @include set-flex($diraxis: flex-end);
    flex-grow: 1;
    /deep/ .search-box {
      input {
        cursor: pointer;
        border: 1px solid;
        width: 0;
        transition: border-color 0.2s linear, width 0.2 linear;
        background: transparent
          url("")
          0.6rem 0.5rem no-repeat;
        &:focus {
          width: 10rem;
          border: 1px solid darkcyan;
        }
      }
      .suggestions {
        top: 3rem;
      }
    }
  }
  #navbar {
    @include set-flex($auaxis: center);
    .nav-item {
      padding-bottom: 0.3rem;
      margin-left: 0.6rem;
      @include set-pose(relative);
      @include set-text(0.95rem);
      text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3);
      .inner-link {
        @include set-text();
        &:after {
          height: 0.2rem;
          width: 0;
          @include set-pose(absolute, ((direction: bottom, position: 0), (direction: left, position: 0)));
          content: "";
          background-color: $theme-main-color;
          transition: all 0.3s ease-in-out;
        }
        &:hover:after {
          width: $match-root;
        }
      }
      .outer-link {
        @include set-text();
      }
      .inner-link-active:after {
        width: $match-root;
      }
    }
  }
  .mobile-navbar-btn {
    display: none;
  }
  .mobile-navbar {
    display: none;
  }
}
.theme-header-hide {
  top: -3.25rem !important;
}

@media (max-width: 768px) {
  #theme-header {
    @include set-flex($diraxis: start);
    @include set-box(($match-root, $theme-header-height), $paddings: (0.5rem, 1rem));
    .mobile-navbar-btn {
      @include set-flex();
      background: transparent;
      .logo {
        @include set-text(1.5rem, $line-height: 2rem, $color: #3b3a3a);
      }
    }
    #navbar {
      display: none;
    }
    .mobile-navbar-btn {
      @include set-box((2rem, 2rem));
      border: none;
    }
    .mobile-navbar {
      @include set-flex(column, start);
      @include set-box((null, null), $paddings: (1rem, 1.5rem));
      @include set-pose(absolute, $z: 0);
      opacity: 0;
      background: rgba(255, 255, 255, 0.8);
      transition: opacity 0.5s, top 0.5s;
      .inner-link {
        @include set-text($color: #3b3a3a);
        @include set-box((null, null), $margins: (0.5rem, 1.5rem, 0.5rem, 1.5rem));
      }
      .outer-link {
        @include set-text($color: #3b3a3a);
        @include set-box((null, null), $margins: (0.5rem, 1.5rem, 0.5rem, 1.5rem));
      }
    }
    .mobile-navbar-show {
      top: 3rem;
      opacity: 1;
    }
  }
}
